<template>
  <div class="discount">
    <el-container>
      <div></div>
      <el-main>
        <!-- Main -->
        <!-- 轮播图 -->
        <el-carousel indicator-position="none" arrow="never" height="400px">
          <el-carousel-item v-for="(item,k) in srcs" :key="k">
            <img :src="item.src" alt />
          </el-carousel-item>
        </el-carousel>
        <div id="main">
          <!-- 全部商品 -->
          <el-button size="small" round @click="getallDIS">全部商品</el-button>
          <!-- 下拉菜单 -->
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              下拉菜单
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">甜品</el-dropdown-item>
              <el-dropdown-item command="2">饮品</el-dropdown-item>
              <el-dropdown-item command="3">巧克力</el-dropdown-item>
              <el-dropdown-item command="4">冰淇淋</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 搜索框 -->
          <el-input
            placeholder="请输入搜索的内容"
            v-model="searchVal"
            @keyup.enter.native="onEnterSearch"
            maxlength="20"
            show-word-limit
            size="small"
            clearable="true"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div id="menu" width="300px" height="400px">
          <div
            @click="goDisDetails"
            v-for="(dis,k) in disList"
            :key="k"
            class="dis"
            :name="dis.discountID"
          >
            <img :src="getPic(dis.disimage1)" alt width="200px" height="250px" />

            {{dis.disName}}
            {{dis.newprice}}
          </div>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[2,4,8]"
              :page-size="pagesize"
              layout="total ,sizes,prev,pager,next,jumper"
              :total="totalSize"
            ></el-pagination>
          </div>
        </div>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      currentPage: 1, //初始页
      pagesize: 4, //默认显示页面数量
      // pageSizes:[1,2,3,4],//页面数据数组，展示的选择每页显示个数的选项
      totalSize: "", //总条数
      searchVal: [],
      discounts: [],
      pageSizes: [2, 4, 8],
      disList: [],
      classID: null,
      srcs: [
        { src: require("../assets/disimages/dis_1.jpg") },
        { src: require("../assets/disimages/dis_2.jpg") },
        { src: require("../assets/disimages/dis_3.jpg") },
        { src: require("../assets/disimages/dis_4.jpg") }
      ],
      imgUrl: require("../assets/shopping.png")
    };
  },
  methods: {
    // 全部商品
    getallDIS() {
      this.$axios
        .get("http://localhost:3000/discount")
        .then(res => {
          console.log(res);
          this.discounts = res.data.data;
          this.totalSize = this.discounts.length;
          // 总页数-1
          this.disList = this.discounts.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          );
          this.classID = null;
        })
        .catch(err => {
          console.log("错误", err);
        });
    },
    // 当页面改变时
    //? 长度改变----改变每页显示的条数的时候  自动触发
    handleSizeChange(val) {
      this.pagesize = val;
      this.disList = this.discounts.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );

      console.log("当前页面:", this.currentPage);
      console.log("当前长度", this.pagesize);
    },
    // 当前改变----当前页码改变之后，触发这个函数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.disList = this.discounts.slice(
        (this.currentPage - 1) * this.pagesize,
        this.currentPage * this.pagesize
      );
    },

    getPic(pic) {
      let path = "http://localhost:3000/upload/" + pic;
      return path;
    },
    // 分类搜索
    handleCommand(command) {
      this.classID = command;
      this.$axios
        .get("http://localhost:3000/discount/disClass?classID=" + this.classID)
        .then(res => {
          console.log("分类查询的结果", res.data.data);
          this.discounts = res.data.data;
          this.totalSize = this.discounts.length;
          // 总页数-1
          this.disList = this.discounts.slice(
            (this.currentPage - 1) * this.pagesize,
            this.currentPage * this.pagesize
          );

          console.log(this.disList);
        })
        .catch(err => {
          console.log("错误", err);
        });
      // this.$message('click on item ' + command);
    },
    //   监听搜索框
    onEnterSearch: function(e, searchVal) {
      console.log("是否分类", this.classID);
      if (this.classID == null) {
        this.$axios
          .get("http://localhost:3000/discount/find?disName=" + this.searchVal)
          .then(res => {
            this.discounts = res.data.data;
            this.totalSize = this.discounts.length;
            // 总页数-1
            this.disList = this.discounts.slice(
              (this.currentPage - 1) * this.pagesize,
              this.currentPage * this.pagesize
            );
          })
          .catch(err => {
            console.log("错误", err);
          });
      } else {
        console.log("测试");
        this.$axios
          .get(
            "http://localhost:3000/discount/getclassFind?disName=" +
              this.searchVal +
              "&?classID=" +
              this.classID
          )
          .then(res => {
            this.discounts = res.data.data;
            this.totalSize = this.discounts.length;
            // 总页数-1
            this.disList = this.discounts.slice(
              (this.currentPage - 1) * this.pagesize,
              this.currentPage * this.pagesize
            );
          })
          .catch(err => {
            console.log("错误", err);
          });
      }
    },
    // 跳转页面
    goDisDetails: function(e) {
      let id = e.currentTarget.getAttribute("name");
      this.$router.push({ name: "disDetails", query: { discountID: id } });
    }
  },
  created() {
    this.$axios
      .get("http://localhost:3000/discount")
      .then(res => {
        console.log(res);
        this.discounts = res.data.data;
        this.totalSize = this.discounts.length;
        // 总页数-1
        this.disList = this.discounts.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        );
      })
      .catch(err => {
        console.log("错误", err);
      });
  }
};
</script>
<style lang="css" scoped>
body {
  background-color: #333;
}
.el-carousel {
  position: relative;
  top: -20px;
  margin: 0;
  padding: 0;
}

.el-footer {
  clear: both;
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  width:100%;
}

.el-header {
  padding: 0px;
  clear: both;
  background-color: #b3c0d1;
  color: #333;
  height: 60px;
  text-align: center;
  line-height: 60px;
}
.el-header > div {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  background-color: #b3c0d1;
}
.el-main {
  position: relative;
  margin: 0 auto;
  padding: 0px;
  width: 1200px;
  background-color: rgba(0, 0, 0, 0);
  color: #333;
  text-align: center;
}
#main {
  position: relative;
  margin-top: 40px;
}
/* body > .el-container {
  margin-bottom: 40px;
} */
.el-container:first-child {
  clear: both;
}
.el-input {
  width: 300px;
  margin: 0 auto;
  position: absolute;
  right: 0px;
}
.el-dropdown {
  position: absolute;
  top: 6px;
  left: 150px;
  height: 50px;
  margin: 0;
  padding: 0;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
span.el-dropdown-link.el-dropdown-selfdefine {
  font-size: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.el-dropdown-menu {
  background-color: #ff0;
  margin-top: 30px;
}
li.el-dropdown-menu__item {
  padding: 0;
}
.dis {
  float: left;
}
.el-button {
  font-size: 15px;
  text-align: center;
  position: absolute;
  left: 0px;
}
#menu {
  position: relative;
  margin-top: 150px;
  width: 1200px;
  height: 100%;
  overflow: auto;
}
.block {
  width: 700px;
  position: absolute;

  bottom: 0px;
}
#menu{
width: 1200px;
}
</style>